import React from "react";
import EditCanvas from "./EditCanvas";
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import styles from "./index.module.scss";
import { changeSelectedId } from "../../../store/componentsReducer";
import { useDispatch } from "react-redux";
import LeftPanel from "./LeftPanel";
import RightPanel from "./RightPanel";
import EditHeader from "./EditHeader";
import { useTitle } from "ahooks";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import Loading from "../../components/Loading";
import Error from "../../Error";

const Edit: React.FC = () => {
  const { loading, error } = useLoadQuestionData();
  const dispatch = useDispatch();
  const { title } = useGetPageInfo();

  useTitle("编辑问卷 - " + title);

  function clearSelectedId() {
    dispatch(changeSelectedId(""));
  }

  if (loading) return <Loading />;

  if (error)
    return <Error title="错误" subTitle="未找到问卷，或许该问卷已被删除" />;

  return (
    <div className={styles.container}>
      <EditHeader />
      <div className={styles["content-wrapper"]}>
        <div className={styles.left}>
          <LeftPanel />
        </div>
        <div className={styles.main} onClick={clearSelectedId}>
          <div className={styles["canvas-wrapper"]}>
            <EditCanvas />
          </div>
        </div>
        <div className={styles.right}>
          <RightPanel />
        </div>
      </div>
    </div>
  );
};

export default Edit;
